<template>
	<view class="pay-list">
		<div class='list' v-if="payEntities">
			<div class='item' v-for="(pay, index) in payEntities" :key="index">
				<div class='top' @click='querySingle(pay)'>
					<div class='number-box line'>
						<div class='project-number'>{{pay.projectName}}</div>
						<div class='status'>
							<uni-tag :text="pay.status==0?'未审批':(pay.status==1?'审批中':'已审批')"
								:type="pay.status==0? 'error' : (pay.status==1?'success':'primary')" />
						</div>
					</div>
					<div class='name-box line'>{{pay.contractTitle}}</div>
					<div class='partner-box line'>{{pay.payment}}</div>
					<div class='contract line'>{{pay.payRatio==null?'--':pay.payRatio+'%'}} /
						{{pay.payMoney==null?'--':pay.payMoney+'元'}}
					</div>
				</div>
				<div class='createTime'>
					<view>
						<text class="iconfont icon-rili"></text>创建时间：
						<uni-dateformat :date="pay.createTime" format='yyyy-MM-dd hh:mm:ss'></uni-dateformat>
					</view>
					<view>
						<uni-tooltip placement="top">
							<view>更多</view>
							<template slot="content">
								<a @click="updateSingle(pay)">编辑</a>&nbsp;/&nbsp;
								<a @click="deleteSingle(pay)">删除</a>&nbsp;/&nbsp;
								<a @click="approve(pay)">审批</a>
							</template>
						</uni-tooltip>
					</view>
				</div>
			</div>
		</div>
		<uni-load-more iconType="circle" v-if="payEntities.length" :status="loadingStatus"></uni-load-more>
		<o-empty v-else bg="#f3f3f3"></o-empty>
		<!-- 审批 -->
		<view class="bottom-modal-box">
			<uni-popup ref="approvePopup" background-color="#fff">
				<view class="popup-content">
					<ApprovePopup :flag="4" :relationId="id"></ApprovePopup>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		api,
		post
	} from '@/util/api'
	import ApprovePopup from '@/components/ApprovePopup.vue'
	export default {
		components: {
			ApprovePopup
		},
		data() {
			return {
				payEntities: [],
				page: 1,
				limit: 10,
				count: 0,
				loadingStatus: 'more',
				id: '', // 支付申请Id
			}
		},
		created() {
			this.queryList()
		},
		beforeMount() {
			uni.$on('addPay', () => {
				this.addPay()
			})
			uni.$on('reloadPayList', () => {
				uni.$emit('financeList', 0)
				uni.switchTab({
					url: '/pages/finance/FinanceNav'
				})
				this.payEntities = []
				this.queryList()
			})
			uni.$on('closePopup', () => {
				this.$refs.approvePopup.close()
			})
		},
		destroyed() {
			uni.$off('addPay')
			uni.$off('reloadPayList')
			uni.$off('closePopup')
		},
		methods: {
			async queryList() {
				let pay = {
					page: this.page,
					limit: this.limit
				}
				let res = await post(api.PayEntities, pay)
				this.count = res.count
				this.loadingStatus = "more"
				this.payEntities = [...this.payEntities, ...res.data]
			},
			querySingle(pay) {
				uni.navigateTo({
					url: '/pages/pay/PayInfo?id=' + pay.id
				})
			},
			addPay() {
				uni.navigateTo({
					url: '/pages/pay/AddPay'
				})
			},
			// 审批
			approve(pay) {
				this.id = pay.id
				this.$refs.approvePopup.open('bottom')
			},
			updateSingle(pay) {
				uni.navigateTo({
					url: '/pages/pay/AddPay?id=' + pay.id
				})
			},
			deleteSingle(pay) {
				uni.showModal({
					title: '提示',
					content: '你确定要删除吗',
					success: function(res) {
						if (res.confirm) {
							post(api.DeletePay, {
								id: pay.id
							}).then(res => {
								console.log(res)
							})
						} else if (res.cancel) {
							console.log('取消');
						}
					}
				});
			}
		}
	}
</script>

<style>
	@import '../../static/css/PayList.css';
</style>